<template>
  <div>
   <!-- <el-input
      placeholder="模糊查询用户"
      v-model="courseName"
      :disabled="false" style="width: 250px;float: left">
    </el-input>
    <el-button type="success" size="small" style="float: left;margin-left: 20px" @click="selectBycName">点击搜索</el-button>-->
    <el-table
      :data="userList"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="uname"
        label="用户名称"
        width="130">
      </el-table-column>
      <el-table-column label="用户头像"   width="180">
        <template slot-scope="scope">
          　　　　<img :src="scope.row.upic" width="120" height="50" class="head_pic"/>
        </template>
      </el-table-column>
      <!--<el-table-column
        prop="teacher.thName"
        label="讲师名称"
        width="100">
      </el-table-column>-->
      <el-table-column
        prop="utel"
        label="用户电话"
        width="60">
      </el-table-column>utel
      <el-table-column
        prop="usex"
        label="性别">
      </el-table-column>

      <el-table-column
      prop="uschool"
      label="毕业院校">
    </el-table-column>
      <el-table-column
      prop="ueduction"
      label="学历">
    </el-table-column>
      <el-table-column
        prop="uindustry"
        label="行业">
      </el-table-column>
      <el-table-column
        prop="uwork"
        label="工作">
      </el-table-column>
      <!--还有5个属性并没有添加-->

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="updateUser(scope.row)">编辑</el-button>
         <!-- <el-button
            size="mini"
            type="danger"
            @click="delete(scope.row.cid)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        courseName:'',
        userList: [
        ],
        currentPage1: 1,
        pageSize:5,
        total:100
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.findPage()
      },
      findPage(){
        this.$axios.get("http://127.0.0.1:8999/user/findPage?pageNo="+this.currentPage1+"&pageSize="+this.pageSize).then(res=>{
            if(res.data.code==200){
            this.total=res.data.data.total;
            this.userList=res.data.data.records
            console.log(res.data)
          }});
      },
      selectBycName(){
        this.findPage()
      },
      updateUser(user){
        console.log(user);
        this.$router.push({name:"userUpdate",params:{'user':user}})
      },
     /* deleteCourse(uid){
        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res=>{
          this.$axios.post("http://127.0.0.1:8999/course/deleteByCid?cid="+cid).then(res=>{
            if(res.data.code==200){
              this.$message.success('课程删除成功')
              this.findPage()
            }else{
              this.$message.error('课程删除失败')
            }
          })
        })
      }*/

    },
    mounted:function () {
      this.findPage()
    }
  }
</script>
¶固定表头
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
